<template>
  <section :class="$style.page">
    <!--头部导航-->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo headerTop"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!--侧边菜单栏-->
      <div class="icon icon-menu-self" @click="changeMenuFn()" :class="$style.menuSelf"></div>
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <!--菜单-->
    <el-menu
      :class="$style.leftMenu"
      background-color="#545c64"
      text-color="#fff"
      default-active="1-4-1"
      class="el-menu-vertical-demo leftMenu"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">导航一</span>
        </template>
      </el-submenu>

      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-menu"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-menu"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
    <section :class="[$style.content, {'hideMenu': isCollapse}]">
      <div :class="$style.tabBar">
        <div class="demo-input-suffix" :class="$style.inputBox">
          <div :class="$style.tapText">客户名字: &nbsp;</div>
          <el-input
            :class="$style.input"
            placeholder="请输入客户名字"
            v-model="name">
            <i slot="suffix" class="el-input__icon el-icon-date"></i>
          </el-input>
        </div>
        <div class="demo-input-suffix" :class="$style.inputBox">
          <div :class="$style.tapText">地址: &nbsp;</div>
          <el-input
            :class="$style.input"
            placeholder="请输入客户地址"
            v-model="address">
            <i slot="suffix" class="el-input__icon el-icon-date"></i>
          </el-input>
        </div>
        <div class="demo-input-suffix" :class="$style.inputBox">
          <div :class="$style.tapText">种类: &nbsp;</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="demo-input-suffix" :class="$style.inputBox">
          <div :class="$style.tapText">日期: &nbsp;</div>
          <div class="block" style="flex: 1">
            <!--<span class="demonstration">默认</span>-->
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="demo-input-suffix" :class="$style.inputBox">
          <div :class="$style.tapText">性别: &nbsp;</div>
          <div class="block">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </div>
        </div>
        <div class="demo-input-suffix" @click="searchFn()">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="tag"
          label="标签"
          width="100"
          :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.tag === '家' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.tag}}</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <testChart width="100%" style="margin-top: 50px;" :item="arrList" ref="testLineCHart"></testChart>

      <columnChart width="100%" style="margin-top: 50px;"></columnChart>
      <pieChart width="100%" style="margin-top: 50px;"></pieChart>
      <button v-on:click="clickFn()">click</button>
      <button v-on:click="toTestPage()">改变页面110</button>
    </section>
  </section>
</template>
<style>
  @import "~styles/style.css";
  .headerTop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    z-index: 80;
  }
  .leftMenu {
    position: fixed;
    left: 0;
    top: 0;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .hideMenu {
    transform: translateX(-137px);
  }
  .el-menu-demo .icon-menu-self {
    margin-right: 134px;
    margin-left: 5px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
  .block .el-date-editor.el-input {
    width: 100%;
  }
  .block .el-radio.el-radio {
    margin-left: 15px;
  }
</style>
<style module lang="less">
  @import "~styles/config/config";
  .page {
    overflow: auto;
  }
  .leftMenu {
    position: fixed;
    left: 0;
    top: 60px;
    z-index: @z-top;
    height: 100%;
  }
  .menuSelf {
    margin-right: 120px;
  }
  .content {
    padding-left: 200px;
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    transition: all linear 0.2s;
    margin-top: 90px;
  }
  .tabBar {
    display: flex;
    align-items: center;
    /*padding-left: 100px;*/
    margin-bottom: 30px;
  }
  .inputBox {
    display: flex;
    align-items: center;
    width: 200px;
    margin-right: 20px;
  }
  .tapText {
    flex-shrink: 0;
  }
  .input {
    flex: 1;
  }
</style>

<script>
  import Main from "./Main";
  export default Main;
</script>
